// ve = vue element
let ve_commodity;
$(function () {
    let default_commodity_info = {id: -1, name: "", type: "", description: "", image: "", price: "", producer: { id: -1 }};
    let default_producer_info = {id: -1, name: "", location: "", contactNumber: ""};
    ve_commodity = new Vue({
        el: "#commodity-data-box",
        data: {
            page_index: 1,
            page_num: 1,
            commodities: [default_commodity_info],
            producers: [default_producer_info],
            pointed_producer_id: -1,
            pointed_type: "",
            go: 1
        },
        methods: {
            get_paging_data(page) {
                ve_commodity.get_pages_amount();
                if (page < 1)
                    page = 1;
                else if (page > ve_commodity.page_num)
                    page = ve_commodity.page_num;

                ajax_get("/commodity/page/" + (page - 1), {
                    producer_id: ve_commodity.pointed_producer_id,
                    type: ve_commodity.pointed_type
                }, function (response) {
                    if (response.code == null) {
                        ve_commodity.commodities = response;
                    }
                }, "Getting paging data of commodities")
            },
            get_pages_amount() {
                ajax_get("/commodity/page", {
                    producer_id: ve_commodity.pointed_producer_id,
                    type: ve_commodity.pointed_type
                }, function (response) {
                    ve_commodity.page_num = response;
                }, "Getting pages amount of commodities")
            },
            render_modal_box(id) {
                ve_commodity_info.message = "";
                ve_commodity_info.errorMessage = "";
                ve_commodity_info.update_button_show = true;
                ve_commodity_info.local_image = null;
                ve_commodity_info.uploaded_image_name = "";
                if (id < 0) {
                    Object.assign(ve_commodity_info.commodity, default_commodity_info);
                    ve_commodity_info.updating = false;
                } else {
                    Object.assign(ve_commodity_info.commodity, ve_commodity.commodities.find(commodity => commodity.id === id));
                    ve_commodity_info.updating = true;
                }
            },
            reset_search() {
                ve_commodity.pointed_producer = "";
                ve_commodity.get_paging_data(0);
            }
        }
    });

    let ve_commodity_info = new Vue({
        el: "#commodity-info",
        data: {
            commodity: {id: -1, name: "新商品", type: "", description: "", image: "", price: "", producer: { id: -1} },
            producers: [default_producer_info],
            errorMessage: "",
            message: "",
            updating: true,
            update_button_show: false,
            local_image: null,
            uploaded_image_name: ""
        },
        methods: {
            create() {
                if (ve_commodity_info.updating) {
                    ve_commodity_info.update();
                    return;
                }
                ve_commodity_info.updating = false;
                let commodity = ve_commodity_info.commodity;

                let image = ve_commodity_info.commodity.image === "" ? ve_commodity_info.uploaded_image_name === "" ?
                    default_image : ve_commodity_info.uploaded_image_name : ve_commodity_info.commodity.image;
                ajax_post("/commodity", {
                    name: commodity.name,
                    image: image,
                    description: commodity.description,
                    price: commodity.price,
                    type: commodity.type,
                    producer: {
                        id: commodity.producer.id
                    }
                }, function (response) {
                    if (response.code == null) {
                        ve_commodity_info.message = "创建成功";
                        ve_commodity_info.close_info_modal();
                    }
                }, "Creating commodity")
            },
            update() {
                ve_commodity_info.updating = true;
                let commodity = ve_commodity_info.commodity;

                let image = ve_commodity_info.commodity.image === "" ? ve_commodity_info.uploaded_image_name === "" ?
                    default_image : ve_commodity_info.uploaded_image_name : ve_commodity_info.commodity.image;
                ajax_put("/commodity", {
                    id : commodity.id,
                    name: commodity.name,
                    image: image,
                    description: commodity.description,
                    price: commodity.price,
                    type: commodity.type,
                    producer: {
                        id: commodity.producer.id
                    }
                }, function (response) {
                    if (response.code == null) {
                        ve_commodity_info.message = "更新成功";
                        ve_commodity_info.close_info_modal();
                    }else
                        ve_commodity_info.errorMessage = response.message;
                }, "Updating commodity")
            },
            deleteIt() {
                if (confirm("确认要删除 " + ve_commodity_info.commodity.name +" ?")) {
                    ajax_delete("/commodity/" + ve_commodity_info.commodity.id, function (response) {
                        if (response.code == null) {
                            ve_commodity_info.message = "已删除";
                            ve_commodity_info.close_info_modal();
                        }
                    }, "Deleting commodity")
                }
            },
            close_info_modal() {
                ve_commodity_info.update_button_show = false;
                setTimeout(function () {
                    ve_commodity.get_paging_data(0);
                    clear_local_image();
                    $("#commodity-info").modal("hide");
                }, 1000);
            }
        },
        computed: {
            fields_empty() {
                let commodity = this.commodity;
                return commodity.name === "" || commodity.description === "" || (commodity.image === "" && this.local_image == null)
                    || commodity.type === "" || commodity.producer.id < 0;
            },
            showing_name() {
                return this.commodity.name === "" ? "新商品" : this.commodity.name;
            },
            update_or_create_method() {
              return this.updating ? "update" : "create";
            },
            update_or_create() {
                return this.updating ? "更新" : "创建";
            },
            showing_img() {
                if (this.commodity.image.startsWith("image"))
                    return imageUrl(this.commodity.image);
                return (this.commodity.image === "" || !this.commodity.image.startsWith("http")) ?
                    default_image : this.commodity.image;
            },
            have_empty_fields() {
                return (this.commodity.image === "" && this.local_image == null) || this.commodity.description === "";
            },
            image_uploaded() {
                return this.uploaded_image_name.startsWith("image");
            },
            showing_local_img() {
                return (this.uploaded_image_name === "" || !this.uploaded_image_name.startsWith("image")) ?
                    default_image : (imageHost() + this.uploaded_image_name);
            }
            
        }
    });

    function clear_local_image() {
        $("#local_commodity_image").val(null);
        ve_commodity_info.local_image = null;
        ve_commodity_info.uploaded_image_name = "";
    }

    $("#local_commodity_image").focus(function () {
        ve_commodity_info.commodity.image = "";
        ve_commodity_info.errorMessage = "";
    });

    $("#commodity_url").focus(function () {
        clear_local_image();
        delete_image(ve_commodity_info.uploaded_image_name);
        ve_commodity_info.errorMessage = "";
    });

    $("#local_commodity_image").change(function (e) {
        delete_image(ve_commodity_info.uploaded_image_name);
        ve_commodity_info.uploaded_image_name = "";
        ve_commodity_info.local_image = e.target.files["0"];
        upload_image(ve_commodity_info.local_image, function (response) {
            if (response != null) {
                if (response.code === "0006") {
                    ve_commodity_info.errorMessage = "图片不能超过 5M";
                } else {
                    ve_commodity_info.uploaded_image_name = response;
                }
            }
        }, "Uploading image")
    });

    let ve_producer = new Vue({
        el: "#producer-data-box",
        data: {
            producers: [default_producer_info]
        },
        methods: {
            get_producer() {
                get_producer_for_all();
            },
            render_modal_box(id) {
                ve_producer_info.message = "";
                ve_producer_info.errorMessage = "";
                ve_producer_info.update_button_show = true;
                if (id < 0) {
                    Object.assign(ve_producer_info.producer, default_producer_info);
                    ve_producer_info.updating = false;
                } else {
                    Object.assign(ve_producer_info.producer, ve_producer.producers.find(producer => producer.id === id));
                    ve_producer_info.updating = true;
                }
            }
        }
    });

    let ve_producer_info = new Vue({
        el: "#producer-info",
        data: {
            producer: {id: -1, name: "", location: "新生产商", contactNumber: ""},
            updating: true,
            update_button_show: false,
            message: "",
            errorMessage: ""
        },
        methods: {
            create() {
                if (ve_producer_info.updating) {
                    ve_producer_info.update();
                    return;
                }
                let producer = ve_producer_info.producer;
                ajax_post("/producer", {
                    name: producer.name,
                    location: producer.location,
                    contactNumber: producer.contactNumber
                }, function (response) {
                    if (response.code == null) {
                        ve_producer_info.message = "创建成功";
                        ve_producer_info.close_info_modal(false);
                    }
                }, "Creating producer")
            },
            update() {
                let producer = ve_producer_info.producer;
                ajax_put("/producer", {
                    id : producer.id,
                    name: producer.name,
                    location: producer.location,
                    contactNumber: producer.contactNumber
                }, function (response) {
                    if (response.code == null) {
                        ve_producer_info.message = "更新成功";
                        ve_producer_info.close_info_modal(false);
                    }
                }, "Updating producer")
            },
            deleteIt() {
                if (confirm("确认要删除 " + ve_producer_info.producer.name +" ? 这会删除所有此生产商的商品 ！")) {
                    ajax_delete("/producer/" + ve_producer_info.producer.id, function (response) {
                        if (response.code == null) {
                            ve_producer_info.message = "已删除";
                            ve_producer_info.close_info_modal(true);
                        }
                    }, "Deleting producer")
                }
            },
            close_info_modal(is_delete) {
                ve_producer_info.update_button_show = false;
                setTimeout(function () {
                    if (is_delete)
                        ve_commodity.get_paging_data(0);
                    get_producer_for_all();
                    $("#producer-info").modal("hide");
                }, 1000);
            }
        },
        computed: {
            fields_empty() {
                return this.producer.name === "" || this.producer.location === ""
                    || this.producer.contactNumber === "" || this.producer.contactNumber.length !== 11;
            },
            showing_name() {
                return this.producer.name === "" ? "新生产商" : this.producer.name;
            },
            update_or_create_method() {
                return this.updating ? "update" : "create";
            },
            update_or_create() {
                return this.updating ? "更新" : "创建";
            }
        }
    });

    function get_producer_for_all() {
        ajax_get("/producer", {}, function (response) {
            if (response.code == null) {
                ve_commodity.producers = response;
                ve_commodity_info.producers = response;
                ve_producer.producers = response;
            } else
                console.log(response.message)
        })
    }

    ve_commodity.get_paging_data(0);
    get_producer_for_all();
});